<template>
  <div class="login">
    <el-container style="height: 100%;" direction="vertical">
      <el-header style="margin-top: 50px">
        <div class="title-font">
          仲恺公安分局一村（居）一警指挥调度平台
        </div>
      </el-header>
      <el-main>
        <div class="login-box">
          <div class="title-font">欢迎登录</div>
          <el-form class="loginform" :rules="rules" :model="loginform" ref="loginform" >
            <el-form-item prop="account">
              <el-input type="text" class="user" clearable placeholder="账号" v-model="loginform.account"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="text" class="password" placeholder="密码" v-model="loginform.password" show-password></el-input>
            </el-form-item>
           <button class="login_btn" @click="submit()">登录</button>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { login } from '../api/login'

export default {
  name: 'Login',
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    var validateAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else {
        callback()
      }
    }
    return {
      input1: '',
      loginform: {
        account: 'admin',
        password: 'unionman@123456'
      },
      account: '',
      restaurants: [],
      state1: '',
      options: [{
        value: '选项1',
        label: 'OCX插件下载'
      }, {
        value: '选项2',
        label: '系统操作说明书'
      }],
      value: '',
      rules: {
        account: [{ required: true, validator: validateAccount, trigger: blur }],
        password: [{ required: true, validator: validatePass, trigger: blur }]
      }
    }
  },
  methods: {
    ...mapMutations(['changeLogin']),
    async submit () {
      this.$refs.loginform.validate(async valid => {
        // 验证失败
        if (!valid) return alert('格式错误，重新输入')
        // 验证成功，发起登录请求
        login(this.loginform)
          .then((res) => {
            console.log(res)
            if (res.data.code === 0) {
              console.log('进入登录')
              console.log(res)
              this.userToken = res.headers.authorization
              this.account = res.data.data.account
              sessionStorage.setItem('account', this.account)
              // 将用户token保存到vuex中
              this.changeLogin({
                Authorization: this.userToken
              })
              this.$router.push('/Home')
              alert('登录成功')
            }
          })
          .catch((error) => {
            alert('登录失败')
            console.log(error)
          })
      })
    }
  }
}
</script>

<style scoped>
.login {
  height: 100%;
  width: 100%;
  position: absolute;
  background-image: url(../assets/img/登录背景.jpg);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title-font {
  margin-top: 20px;
  font-size: 30px;
  font-weight: 700;
  text-shadow: 0 0 6px 0 rgba(67,223,255,.49);
  background-image: -webkit-linear-gradient(90deg,#a5f0ff,#fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 40px;
  width: 600px;
  text-align: center;
}
.login-box {
  width: 584px;
  height: 422px;
  box-sizing: border-box;
  background-image: url(../assets/img/登录框.png);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px;
}
body{
  margin: 0;
}
.user{
  background-image: url(../assets/img/用户.png);
  background-size: 20px 20px;
  background-position: 15px 18px;
  background-color: #04376a;
  background-repeat: no-repeat;
  padding: 8px 10px 8px 40px;
  border: 1px solid #0b60c6;
  color: white;
  /* margin: 8px; */
  width: 220px;
}
.password {
  background-image: url(../assets/img/密码.png);
  background-size: 20px 20px;
  background-position: 15px 18px;
  background-color: #04376a;
  background-repeat: no-repeat;
  padding: 8px 10px 8px 40px;
  border: 1px solid #0b60c6;
  color: white;
  /* margin: 8px; */
  width: 220px;
}
.login_btn{
  width: 274px;
  height: 35px;
  background: #088df4;
  border: 1px solid #ddd;
  color: #fff;
}
.loginform{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loginform >>> .el-input__inner {
  height: 28px;
  line-height: 28px;
  color: white;
  border: 0;
  background-color: #04376a;
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.tip {
  height: 60px;
  width: 274px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.font-question{
  font-size: 10px;
  color: #fff;
}
.tip /deep/ .el-input__inner {
  height: 30px;
  width: 150px;
  background-color: #04376a;
}
.tip >>> .el-scrollbar{
  background-color: #111f3a;
  border-color: #073c75;
  color: #37a5f0;
  font-size: 10px;
}
.tip >>> .el-input__inner{
  color: #fff;
}
</style>
